<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Tiny.js DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style>
html, body, p, div {margin:0;padding:0;}
</style>
</head>
<body>
<script src='../libs/tiny.js'></script>
<script type="text/javascript" src="../libs/minicomps.min.js"></script>
<script>
const {Panel,PlayButton,Label,TextInput,Canvas,Button,VSlider,VBox,NumericStepper,HSlider,RadioButton,Toggle,TipsManager} = mc;
	
  const config = {
    showFPS: true, // 显示帧频
    dpi: 5, // 分辨率
    renderOptions: {
      backgroundColor: 0x2a3145 // 画布背景色
    }
  };

  // 新建App
  const app = new Tiny.Application(config);
  const tween = new Tiny.TWEEN.Tween();

  // 新建场景
  class StartLayer extends Tiny.Container {
    constructor() {
      super();
		
		let nodes=[];
		let groups=[];
		let count=0;
		let step=0;
		var model={
			type:1,
			select:1,
			vx:50,
			vy1:0,
			vy2:0,
			cx:0,
			cy:0,
			r:0
		}
		for(let i=0;i<3;i++){
			let node = new Tiny.Graphics().beginFill(0xFF0000).drawCircle(0, 0, 30, 30);
			//if(i==0) node.beginFill(0x000000).drawCircle(0, 0, 3, 3);
			node.name=''+(i+1);
			node.x=600+200*i;
			node.y=300;
			node.pos={x:node.x,y:node.y}
			this.addChild(node);
			nodes.push(node);
			
			node.setEventEnabled(true);
			node.on('mouseup', () => {
			  TipsManager.alert('选择'+(node.name==model.select),1000)
			});
		}
		let isMove=false;
	  	let ticker = new Tiny.ticker.Ticker();
		let node1=null;
		let node2=null;
	  	ticker.add(function (time) {
			if(isMove){
				let dis=3;
				if(count==step){
					step++;
					node1=nodes[groups[count]-1];
					node2=nodes[groups[step]-1];
					model.vy1=0;
					model.vy2=0;
					model.r=Math.abs(node1.pos.x-node2.pos.x)/2;
					model.cx=node1.pos.x<node2.pos.x?node1.pos.x+model.r:node2.pos.x+model.r;
					model.cy=node1.pos.y;
				}else{
					if(node1.x!=node2.x){
						let vx=model.vx*0.003;
						if(model.type==1){
							node1.x+=(node2.pos.x-node1.x)*vx
							node2.x+=(node1.pos.x-node2.x)*vx
						}else if(model.type==2){
							let radius=60;
							node1.x+=(node2.pos.x-node1.x)*vx
							node2.x+=(node1.pos.x-node2.x)*vx
							node1.y+=10-(model.vy1++)*vx*2;
							node2.y+=10+(model.vy2--)*vx*2;
							node1.y=node1.pos.y+Math.sin(vx*model.vy1++)*radius;
							node2.y=node1.pos.y+Math.sin(vx*model.vy2--)*radius;
						}else if(model.type==3){
							let pi=node1.pos.x<node2.pos.x?Math.PI:0
							let angle=pi+(++model.vy1)*vx;
							node1.x=model.cx+Math.cos(angle)*model.r;  
							node1.y=model.cy+Math.sin(angle)*model.r;
							pi=node2.pos.x<node1.pos.x?Math.PI:0
							let angle2=pi+(++model.vy2*vx);
							node2.x=model.cx+Math.cos(angle2)*model.r;  
							node2.y=model.cy+Math.sin(angle2)*model.r;
						}else if(model.type==4){
							let pre=2;
							let nx=(model.r/pre)
							dis=nx*vx+1;
							let s1=node1.pos.x<node2.pos.x?1:-1;
							node1.x+=nx*vx*s1;
							let s2=node2.pos.x<node1.pos.x?1:-1;
							node2.x+=nx*vx*s2;
							if(Math.abs(node1.x-node2.pos.x)<model.r){
								model.vy1=s1;
								model.vy2=s2;
							}else{
								model.vy1=-1*s1;
								model.vy2=-1*s2;
							}
							node1.y+=(nx*vx*model.vy1)*0.5;
							node2.y+=(nx*vx*model.vy2)*0.5;
						}else if(model.type==5){
							let pi=node1.pos.x<node2.pos.x?Math.PI:0
							let angle=pi+(++model.vy1)*vx;
							node1.x=model.cx+Math.cos(angle)*model.r;  
							node1.y=model.cy+Math.sin(angle)*model.r/2;
							pi=node2.pos.x<node1.pos.x?Math.PI:0
							let angle2=pi+(++model.vy2*vx);
							node2.x=model.cx+Math.cos(angle2)*model.r;  
							node2.y=model.cy+Math.sin(angle2)*model.r/2;
						}
						if(Math.abs(node1.x-node2.pos.x)<dis){
							count++;
							let temp=node1.pos.x;
							node1.pos.x=node2.pos.x;
							node2.pos.x=temp;
							node1.x=node1.pos.x;
							node2.x=node2.pos.x;
							
							temp=node1.pos.y;
							node1.pos.y=node2.pos.y;
							node2.pos.y=temp;
							node1.y=node1.pos.y;
							node2.y=node2.pos.y;
							if(count==groups.length-1){
								isMove=false;
							}
						}
					}
				}
				
			}
			
	 	});
	 	ticker.start();
		
		let panel=new Canvas(document.body,0,0,230,500);
		new Label(panel,5,5,'游戏控制面板');
		new Label(panel,5,25,'1.自定义步骤，只能使用1,2,3来重复组合');
		let input=new TextInput(panel,5,50).setSize(220,20)
		new Button(panel,5,75,'自定义开始',()=>{
			groups=String(input.text).split(',');
			console.log(groups.length)
			console.log(groups)
			if(groups.length>1){	
				isMove=true;
				count=0;
				step=0;
			}else{
				console.warn('请输入正确数据：1,2,3...')
			}
		});

		new Label(panel,5,115,'2.随机步骤，只要指定步骤就可以');
		let numer=new NumericStepper(panel, 5, 150, '选择步数', 10, 1, 100);
		new Button(panel,5,175,'随机开始',()=>{
			var total=numer.value;
			groups=[];
			for(let i=0;i<=total;i++){
				let n=Math.ceil(Math.random()*3);
				if(i==0){
					groups.push(n);
				}else if(n!=groups[i-1]){
					//console.log(i,n,groups[i-1])
					groups.push(n);
					if(i==total-1) break;
				}else{
					i--;
				}
			}
			console.log(groups)
			isMove=true;
			count=0;
			step=0;
		});
		
		new Toggle(panel,5,230,'是否同色',true,(e)=>{
			for(let i=0;i<3;i++){
				let node = nodes[i];
				let color=e.detail?0xFF0000:Math.random()*0xFFFFFF
				node.clear();
				node.beginFill(color).drawCircle(0, 0, 30, 30);
			}
		})
		new Button(panel,100,230,'重置',()=>{window.location.reload()}).setSize(60,20)

		new HSlider(panel,5,280,'运动速度',50,1,100).bind(model,'vx');
		
		new Label(panel,5,310,'运动类型')
		let vBox=new VBox(panel,5,330);
		for(let i=0;i<5;i++) new RadioButton(vBox,0,0,'group1',(i+1),i==0).bind(model,'type');
		vBox.spacing=10;
		vBox.layout();
		
		new Label(panel,100,310,'小球藏的位置')
		let vBox2=new VBox(panel,100,330);
		for(let i=0;i<3;i++) new RadioButton(vBox2,0,0,'group2',(i+1),i==0,(e)=>{
			console.log(e.detail);
			if(!this.ball) this.ball = new Tiny.Graphics().beginFill(0xFFFFFF).drawCircle(0, 0, 6, 6); 
			this.addChild(this.ball);
			this.ball.visible=true;
			this.ball.alpha=1;
			this.ball.removeActions();
			this.ball.position={x:800,y:500};
			console.log(nodes[parseInt(e.detail)-1].position)
			let {x,y}=nodes[parseInt(e.detail)-1].position;
			this.ball.runSequenceAction(Tiny.MoveTo(500, Tiny.point(x,y)),Tiny.FadeOut(200));
		}).bind(model,'select');
		vBox2.spacing=10;
		vBox2.layout();
    }
  }

  // 启动
  app.run(new StartLayer());
</script>
</body>
</html>